require("../../both/base")
require("./AdminIndexPictures.scss")

import Popup from "../../both/Popup/Popup.jsx"
import DataTable from "../DataTabel/DataTable.jsx";

// todo : editHref应该改成editFunc，参数是条目的id

class AdminIndexPicturesCtrl extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            modalState : false,
            img : `${location.protocol}//${location.hostname}:${location.port}/p_dist/default.jpg`,
            href : ""
        }

        const init = this.props.init
        init()
    }

    addPictureWrap(){
        if(this.addDisable){
            return
        }

        const {addCourse} = this.props
        const hideModal = this.hideModal.bind(this)

        if(this.state.img == "" || this.state.href == ""){
            toastr.warning("值不合法")
            return
        }

        addCourse({
            img : this.state.img,
            href : this.state.href
        })

        hideModal()
        toastr.success("添加成功")
    }

    hrefChange(e){
        this.setState({
            href : e.target.value
        })
    }

    showModal(){
        if(this.addDisable){
            return
        }

        this.setState({
            modalState : true
        })
        this.forceUpdate()
    }

    hideModal(){
        this.setState({
            modalState : false
        })
        this.forceUpdate()
    }

    delItemWrap(item){
        var self = this
        const delItem = self.props.delItem
        return function(e){
            if(confirm("确认删除吗？")){
                delItem(item)
            }
        }
    }

    componentDidMount(){
        var self = this
        var uploader = this.uploader = WebUploader.create({
            auto: true,
            pick: '#filePicker',
            server: `${location.protocol}//${location.hostname}:${location.port}/postFile`,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*',
            }
        })

        uploader.on( 'uploadSuccess', function( file, res) {
            toastr.success("图片上传成功")
            console.log(res.url)
            self.setState({
                img : res.url
            })
        })

        uploader.on( 'uploadError', function( file ) {
            toastr.error("图片上传失败")
        })
    }

    render(){
        var self = this

        // interface func
        const hrefChange = this.hrefChange.bind(this)
        const hideModal = this.hideModal.bind(this)
        const showModal = this.showModal.bind(this)
        const addPictureWrap = this.addPictureWrap.bind(this)
        const delItemWrap = this.delItemWrap.bind(this)

        const ths = ["轮博图id","图片","图片链接地址","操作"]
        const trs = self.props.courses.map((e,i) => {
            return <tr key={i}>
                <td><div className="item">{e.id}</div></td>
                <td><div className="item"><img className="datatable_img" src={e.img} alt=""/></div></td>
                <td><div className="item"><a href={e.href}>{e.href}</a></div></td>
                <td><div className="item">
                    <div className="btn btn-danger" onClick={self.delItemWrap(e)}>删除</div>
                </div></td>
            </tr>
        })

        return <div className="admin_index_pictures_ctrl bln">
            <div className="title">
                <span>首页轮播图管理</span>
            </div>

            <DataTable {...self.props}
                       ths={ths}
                       searchPlaceHolder="输入文本进行查找"
                       trs={trs}
                       addDisable={false}
                       editDisable={true}
                       selectDisable={true}
                       editHref="#"
                       showModal={showModal}
            />

            <Popup show={this.state.modalState} title="添加轮播图" onOk={addPictureWrap} onCancel={hideModal}>
                <div className="modal_course_info_edit">
                    <ul className="modal_lists">
                        <li>
                            <span className="item_title">图片链接地址</span>
                            <span className="edit_area"><input type="text" className="input_edit_item" value={this.state.href} onChange={hrefChange} /></span>
                        </li>
                        <li>
                                <span className="item_title">
                                    轮播图片
                                </span>
                            <span className="edit_area">
                                    <div className="img_op_cr verticle_middle_wr">
                                        <img className="img_thumb"
                                             src={this.state.img}
                                             alt="pic"/>
                                        <div className="img_mask_op">
                                            <div className="img_op">
                                                <div className="btn btn-primary" id="filePicker">
                                                    替换
                                                </div>
                                                {/*<div className="btn btn-danger">删除</div>*/}
                                            </div>
                                            <div className="img_mask"></div>
                                        </div>
                                    </div>
                                </span>
                        </li>
                        <li></li>
                    </ul>
                </div>
            </Popup>

        </div>
    }
}

export default AdminIndexPicturesCtrl